<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Cropper</title>

		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/font-awesome.min.css">
		<!-- CSS -->
		<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">		 -->
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/cropper.css">
		<link rel="stylesheet" href="css/main.css">

		<style>
			#container {
				width: 100%;
				position: absolute;
				top: 44px;
				bottom: 0px;
				background: #000000;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="cutter" class="mui-pull-right" style="font-size: 15px;color: white;line-height: 40px;">
				<img src="../../images/upload.png" width="20px" />
			</a>
			<h1 class="mui-title title-color"><b id="chatting-nickname">个人头像</b></h1>
		</header>

		<!-- Content -->
		<div id="container">
			<div class="img-container">
				<img id="image" src="" style="background-color: #000000;">
			</div>
		</div>

		<!-- Scripts -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> -->
		<script src="../../js/jquery-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>		 -->
		<script src="../../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="https://fengyuanchen.github.io/js/common.js"></script> -->
		<script src="js/cropper.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();


			var $image = $('#image');
			mui.plusReady(function() {
				$image[0].crossOrigin = "Anonymous";
				var user = app.getGlobalUserInfo();
				var faceImage = user.head_portrait_url_big;
				// 获取屏幕宽度，设置图片
				$image.attr('src', app.imgServerUrl + faceImage);

				/** ======================== 从相册选择图片 ======================== **/
				// 从相册中选择图片
				console.log("从相册中选择图片:");
				plus.gallery.pick(function(path) {
					$image.attr('src', path);
					console.log(path);
					faceCutter();
				}, function(e) {
					mui.openWindow("../../views/student/studentFace.html", "studentFace.html");
				}, {
					filter: "image"
				});

				/** ======================== 图片裁剪 ======================== **/

				$("#cutter").on('tap', function() {

					var cropper = $image.data('cropper');
					$image[0].crossOrigin = "Anonymous";
					var result = $image.cropper("getCroppedCanvas");
					if (result) {
						var base64Url = result.toDataURL();

						var base64size = getImgByteSize(base64Url);
						
						var max_size = 1024 * 1024;
						
						if (base64size < max_size) {
							plus.nativeUI.showWaiting("上传中...");
							// 上传头像
							var userinfo = app.getGlobalUserInfo();
							// 与后端联调
							mui.ajax(app.serverUrl + "/user/student/uploadHeadPortraitBase64", {
								data: {
									user_id: userinfo.user_id,
									head_portraitBase64: base64Url
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
								},
								success: function(data) {
									plus.nativeUI.closeWaiting();
									//服务器返回响应，根据响应结果，分析是否登录成功；
									// 控制台中输入日志
									console.log(JSON.stringify(data));
									if (data.status == 200) {
										// 登录或者注册成功之后，保存全局用户对象到本地缓存
										var userinfo = data.data;
										app.setGlobalUserInfo(userinfo);
							
										// 获取 我 页面的webview，更新小头像
										var studentSelfWebview = plus.webview.getWebviewById(
											"studentSelf.html");
										// 触发另外一个webview的自定义事件，可以使用mui.fire()
										mui.fire(studentSelfWebview, "refresh");
							
										// 获取 头像 页面的webview，更新大头像
										var studentFaceWebview = plus.webview.getWebviewById(
											"studentFace.html");
										mui.fire(studentFaceWebview, "refresh");
							
										// 页面跳转
										mui.openWindow("../../view/student/student.html",
										"student.html");
									} else {
										app.showToast(data.msg, "error");
									}
								},
								error: function(xhr, type, errorThrown) {
									//异常处理；
									console.log(type);
								}
							});
						} else {
							app.showToast("因服务器限制，请上传不大于1M的图片!", "error");
						}
					}
				});
			});

			function faceCutter() {

				plus.nativeUI.showWaiting("请稍等...");
				//$image[0].crossOrigin = "Anonymous";
				//var $image = $('#image');
				var options = {
					aspectRatio: 1 / 1,
					//checkCrossOrigin: false,
					crop: function(e) {
						/* var canvas_img = document.getElementById("image");
						let src = canvas_img.getAttribute('src');
						canvas_img.crossOrigin = "Anonymous";
						//canvas_img.addEventListener("load", imageReceived, false);
						canvas_img.src = src; */
					}
				};
				//$image[0].crossOrigin = "Anonymous";
				// Cropper
				$image.cropper(options);

				plus.nativeUI.closeWaiting();
			}

			function getImgByteSize(base64) {
				if (base64) { // 获取base64图片byte大小
					base64 = base64.split(",")[1].split("=")[0];
					var strLength = base64.length;
					var fileLength = strLength - (strLength / 8) * 2;
					return Math.floor(fileLength); // 向下取整
				} else {
					return null
				}
			}
		</script>

	</body>

</html>
